import React from 'react'
import { Row, Col, Steps, Carousel } from "antd"
import { ArrowRightOutlined } from "@ant-design/icons"
import './settlein.less'
import Texty from 'rc-texty';

const { Step } = Steps;

const img = {
    img2: "https://z3.ax1x.com/2021/07/13/WknySH.png",
    img1: "https://z3.ax1x.com/2021/07/13/Wknrfe.png"
}



export default class SettleIn extends React.Component {
    state = {
        img: img.img1,
        current: 0,
    }
    onChange = current => {
        console.log('onChange:', current);
        this.setState({ current });
    };
    render() {
        const { current } = this.state;
        const stepDetail = () => {
            if (current === 0) {
                return (
                    <div>
                        <Row justify="center" style={{ padding: 30 }}>
                            <Col span={9} offset={1}>
                                <div style={{ width: 400, height: 400 }}>
                                    <img className='img-responsive' src="https://z3.ax1x.com/2021/07/13/WA6NsH.png" />
                                </div>
                            </Col>
                            <Col span={6} offset={2}>
                                <ul>
                                    <li style={{ fontSize: 16, padding: "10px 0" }} key='0'>
                                    按提示填写个人信息
                                    </li>
                                    <li style={{ fontSize: 16, padding: "10px 0" }} key='1'>
                                    可填写推荐人手机号码
                                    </li>
                                    <li style={{ fontSize: 16, padding: "10px 0" }} key='2'>
                                    注册之后按要求认证公司
                                    </li>
                                </ul>

                                <div style={{ paddingTop: 80 }}>
                                    <a style={{ color: '#DF1317' }} href="http://linghuo.xbbzp.com/user/register ">
                                        立即体验  <ArrowRightOutlined style={{ paddingLeft: 10 }} />
                                    </a>
                                </div>

                            </Col>
                        </Row>
                    </div>
                )
            }
            if (current === 1) {
                return (
                    <div>
                        <Row justify="center" style={{ padding: 30 }}>
                            <Col span={9} offset={1}>
                                <div style={{ width: 400, height: 400 }}>
                                    <img className='img-responsive' src="https://z3.ax1x.com/2021/08/06/fnHD58.png" />
                                </div>
                            </Col>
                            <Col span={6} offset={2}>
                                <ul>
                                    <li style={{ fontSize: 16, padding: "10px 0" }} key='0'>
                                    同企业建立长期合作关系
                                    </li>
                                    <li style={{ fontSize: 16, padding: "10px 0" }} key='1'>
                                    在小程序中可以维护合作企业
                                    </li>
                                </ul>

                                <div style={{ paddingTop: 80 }}>
                                    <a style={{ color: '#DF1317' }} href="http://linghuo.xbbzp.com/user/register ">
                                        立即体验  <ArrowRightOutlined style={{ paddingLeft: 10 }} />
                                    </a>
                                </div>

                            </Col>
                        </Row>
                    </div>
                )
            } if (current === 2) {
                return (
                    <div>
                        <Row justify="center" style={{ padding: 30 }}>
                            <Col span={9} offset={1}>
                                <div style={{ width: 400, height: 400 }}>
                                    <img className='img-responsive' src="https://z3.ax1x.com/2021/08/06/fnHdbt.png" />
                                </div>
                            </Col>
                            <Col span={6} offset={2}>
                                <ul>
                                    <li style={{ fontSize: 16, padding: "10px 0" }} key='0'>
                                    选择合适的岗位接单
                                    </li>
                                    <li style={{ fontSize: 16, padding: "10px 0" }} key='1'>
                                    可以对工资、奖金、佣金进行设置                                    
                                    </li>
                                </ul>

                                <div style={{ paddingTop: 80 }}>
                                    <a style={{ color: '#DF1317' }} href="http://linghuo.xbbzp.com/user/register ">
                                        立即体验  <ArrowRightOutlined style={{ paddingLeft: 10 }} />
                                    </a>
                                </div>

                            </Col>
                        </Row>
                    </div>
                )
            } if (current === 3) {
                return (
                    <div>
                        <Row justify="center" style={{ padding: 30 }}>
                            <Col span={9} offset={1}>
                                <div style={{ width: 400, height: 400 }}>
                                    <img className='img-responsive' src="https://z3.ax1x.com/2021/08/06/fnHsPS.png" />
                                </div>
                            </Col>
                            <Col span={6} offset={2}>
                                <ul>
                                    <li style={{ fontSize: 16, padding: "10px 0" }} key='0'>
                                        调整工资和奖金吸引更多求职者关注
                                    </li>
                                    <li style={{ fontSize: 16, padding: "10px 0" }} key='1'>
                                       根据实际需求设定面试时间和求职限制等
                                    </li>
                                </ul>

                                <div style={{ paddingTop: 80 }}>
                                    <a style={{ color: '#DF1317' }} href="http://linghuo.xbbzp.com/user/register ">
                                        立即体验  <ArrowRightOutlined style={{ paddingLeft: 10 }} />
                                    </a>
                                </div>

                            </Col>
                        </Row>
                    </div>
                )
            } if (current === 4) {
                return (
                    <div>
                        <Row justify="center" style={{ padding: 30 }}>
                            <Col span={9} offset={1}>
                                <div style={{ width: 400, height: 400 }}>
                                    <img className='img-responsive' src="https://z3.ax1x.com/2021/08/06/fnHBUf.png" />
                                </div>
                            </Col>
                            <Col span={6} offset={2}>
                                <ul>
                                    <li style={{ fontSize: 16, padding: "10px 0" }} key='0'>
                                       发布之后求职者将会在求职端小程序看到岗位信息
                                    </li>
                                    
                                </ul>

                                <div style={{ paddingTop: 80 }}>
                                    <a style={{ color: '#DF1317' }} href="http://linghuo.xbbzp.com/user/register ">
                                        立即体验  <ArrowRightOutlined style={{ paddingLeft: 10 }} />
                                    </a>
                                </div>

                            </Col>
                        </Row>
                    </div>
                )
            }
        }

        return (
            <div>
                <Carousel autoplay>
                    <div>
                        <div className="setitle">致力于成为灵活用工领域的领军企业</div>
                        <img className='img-responsive' src="https://z3.ax1x.com/2021/07/19/WGxJE9.png" />
                    </div>
                    {/* <div>
                        <h3 style={contentStyle}>2</h3>
                    </div>
                    <div>
                        <h3 style={contentStyle}>3</h3>
                    </div>
                    <div>
                        <h3 style={contentStyle}>4</h3>
                    </div> */}
                </Carousel>

                <div style={{ padding: "70px" }}>
                    <Row>
                        <Col span={8} offset={4}>
                            <div style={{ width: 400, height: 400 }}>
                                <img className='img-responsive' src="https://z3.ax1x.com/2021/07/10/WSIT1g.png" />
                            </div>
                        </Col>
                        <Col span={10} offset={2}>
                            <h1>商家入驻</h1>
                            <div style={{ fontSize: 20, paddingBottom: 20 }}>———</div>
                            <ul>
                                <li style={{ fontSize: 16, padding: "10px 0" }} key='0'>
                                    <Texty >认证后可在线发布企业所需招聘岗位</Texty>
                                </li>
                                <li style={{ fontSize: 16, padding: "10px 0" }} key='1'>
                                    <Texty >节省线下物料制作</Texty>

                                </li>
                                <li style={{ fontSize: 16, padding: "10px 0" }} key='2'>
                                    <Texty >平台前期进行工作培训</Texty>

                                </li>
                                <li style={{ fontSize: 16, padding: "10px 0" }} key='3'>
                                    <Texty>认证后可在线发布岗位</Texty>
                                </li>
                            </ul>
                            <div>
                                <a style={{ color: '#DF1317' }} href="http://linghuo.xbbzp.com/user/register ">
                                    立即体验  <ArrowRightOutlined style={{ paddingLeft: 10 }} />
                                </a>
                            </div>
                        </Col>
                    </Row>
                </div>

                <div style={{ padding: "70px 0px", backgroundColor: '#F8F8F8' }}>
                    <Row>
                        <Col span={6} offset={6}>
                            <h1>服务站入驻</h1>
                            <div style={{ fontSize: 20, paddingBottom: 20 }}>———</div>
                            <ul>
                                <li style={{ fontSize: 16, padding: "10px 0" }} key='0'>
                                    <Texty >成为服务站推广人员可享推荐收益</Texty>
                                </li>
                                <li style={{ fontSize: 16, padding: "10px 0" }} key='1'>
                                    <Texty >可推荐多个服务站</Texty>

                                </li>
                                <li style={{ fontSize: 16, padding: "10px 0" }} key='2'>
                                    <Texty >成为服务站推广人员可享推荐收益</Texty>

                                </li>
                                <li style={{ fontSize: 16, padding: "10px 0" }} key='3'>
                                    <Texty>可推荐多个服务站</Texty>
                                </li>
                            </ul>
                            <div>
                                <a style={{ color: '#DF1317' }} href="http://linghuo.xbbzp.com/user/register ">
                                    立即体验  <ArrowRightOutlined style={{ paddingLeft: 10 }} />
                                </a>
                            </div>
                        </Col>
                        <Col span={10} offset={2}>
                            <div style={{ width: 400, height: 400 }}>
                                <img className='img-responsive' onClick={() => {
                                    this.setState({
                                        img: img.img1 ? img.img2 : img.img1
                                    })
                                }} src={this.state.img} />

                            </div>
                        </Col>
                    </Row>
                </div>


                <div style={{ height: 600, padding: "70px" }}>
                    <div style={{ textAlign: 'center', padding: '0 0 50px 0' }}>
                        <h1 >派遣公司入驻</h1>
                    </div>
                    <Row justify="center">
                        <Col span={18}>
                            <div>
                                <Steps current={current} progressDot onChange={this.onChange}>
                                    <Step title="注册" />
                                    <Step title="绑定合作公司" />
                                    <Step title="接单" />
                                    <Step title="设置" />
                                    <Step title="发布" />

                                </Steps>
                            </div>
                        </Col>
                    </Row>

                    {stepDetail()}



                </div>
            </div>
        )
    }
}